<template>
  <div class="rentOrder component actWrap">
    <tab :line-width="2" :animate="false">
      <tab-item @on-item-click="onItemClick" selected>全部</tab-item>
      <tab-item @on-item-click="onItemClick">待确认</tab-item>
      <tab-item @on-item-click="onItemClick">待签约</tab-item>
      <tab-item @on-item-click="onItemClick">待付款</tab-item>
      <tab-item @on-item-click="onItemClick">已完成</tab-item>
    </tab>
    <!-- 全部 -->
    <div class="order-list" v-if="tabIdx === 0">
      <div class="order-list-item" v-for="(item, index) in orderList[tabIdx]" :key="index">
        <div class="list-item-renter">
          <div class="renter-msg-left">
            <span>{{item.webUser && item.webUser.trueName}}&nbsp;</span>
            <span class="order-type order-type-renew" v-if="item.orderType === 2">续租</span><span class="order-type order-type-cancel" v-if="item.orderType === 3">退租</span>
            <span class="status">{{ transOrderStatus(item.status) }}</span>
          </div>
          <div class="renter-msg-button"><span>{{(new Date(item.createTime && item.createTime.replace(/-/g, '/'))).Format('yyyy-MM-dd h:m')}}</span><span>订单编号：{{item.orderCode}}</span></div>
        </div>
        <house-list v-if="item.housePerson" :houseInfo="item.housePerson" :detailPath="+item.houseType === 2 ? '/apartmentDetail' : '/detail'"></house-list>
        <div class="btn-wrap" v-if="item.status === 1">
          <x-button mini plain style="color: #097dde; border-color: #097dde;" @click.native="agree(item.orderType, item.id)">同意</x-button>
          <x-button mini plain style="color: #d4323f; border-color: #d4323f;" @click.native="refuse(item.id)">拒绝</x-button>
          <!--<div class="btn-wrap">
        </div>-->
          <x-button mini plain @click.native="contactLandlor(item.webUser.id)">联系租客</x-button>
        </div>
        <div class="btn-wrap" v-if="item.status === 3 || item.status === 4">
          <x-button mini plain @click.native="contactLandlor(item.webUser.id)">联系租客</x-button>
        </div>
      </div>
      <no-data v-show="orderList[tabIdx].length === 0"><span slot="message">您还没有订单信息哦~</span></no-data>
    </div>
    <!-- 待确认 -->
    <div class="order-list" v-if="tabIdx === 1">
      <div class="order-list-item" v-for="(item, index) in orderList[tabIdx]" :key="index">
        <div class="list-item-renter">
          <div class="renter-msg-left">
            <span>{{ item.webUser && item.webUser.trueName }}&nbsp;</span>
            <span class="order-type order-type-renew" v-if="item.orderType === 2">续租</span><span class="order-type order-type-cancel" v-if="item.orderType === 3">退租</span>
            <span class="status">{{ transOrderStatus(item.status) }}</span>
          </div>
          <div class="renter-msg-button"><span>{{ (new Date(item.createTime && item.createTime.replace(/-/g, '/'))).Format('yyyy-MM-dd h:m') }}</span><span>订单编号：{{ item.orderCode }}</span></div>
        </div>
        <house-list v-if="item.housePerson" :houseInfo="item.housePerson" :detailPath="+item.houseType === 2 ? '/apartmentDetail' : '/detail'"></house-list>
        <div class="btn-wrap">
          <x-button mini plain style="color: #097dde; border-color: #097dde;" @click.native="agree(item.orderType, item.id)" >同意</x-button>
          <x-button mini plain style="color: #d4323f; border-color: #d4323f;" @click.native="refuse(item.id)" >拒绝</x-button>
          <x-button mini plain @click.native="contactLandlor(item.webUser.id)">联系租客</x-button>
        </div>
      </div>
      <no-data v-show="orderList[tabIdx].length === 0"></no-data>
    </div>
    <!-- 待签约 -->
    <div class="order-list" v-if="tabIdx === 2">
      <div class="order-list-item" v-for="(item, index) in orderList[tabIdx]" :key="index">
        <div class="list-item-renter">
          <div class="renter-msg-left">
            <span>{{ item.webUser && item.webUser.trueName }}&nbsp;</span>
            <span class="order-type order-type-renew" v-if="item.orderType === 2">续租</span><span class="order-type order-type-cancel" v-if="item.orderType === 3">退租</span>
            <span class="status">{{ transOrderStatus(item.status) }}</span>
          </div>
          <div class="renter-msg-button"><span>{{ (new Date(item.createTime && item.createTime.replace(/-/g, '/'))).Format('yyyy-MM-dd h:m') }}</span><span>订单编号：{{ item.orderCode }}</span></div>
        </div>
        <house-list v-if="item.housePerson" :houseInfo="item.housePerson" :detailPath="+item.houseType === 2 ? '/apartmentDetail' : '/detail'"></house-list>
        <div class="btn-wrap">
          <x-button mini plain @click.native="contactLandlor(item.webUser.id)">联系租客</x-button>
        </div>
      </div>
      <no-data v-show="orderList[tabIdx].length === 0"></no-data>
    </div>
    <!-- 待付款 -->
    <div class="order-list" v-if="tabIdx === 3">
      <div class="order-list-item" v-for="(item, index) in orderList[tabIdx]" :key="index">
        <div class="list-item-renter">
          <div class="renter-msg-left">
            <span>{{ item.webUser && item.webUser.trueName }}&nbsp;</span>
            <span class="order-type order-type-renew" v-if="item.orderType === 2">续租</span><span class="order-type order-type-cancel" v-if="item.orderType === 3">退租</span>
            <span class="status">{{ transOrderStatus(item.status) }}</span>
          </div>
          <div class="renter-msg-button"><span>{{ (new Date(item.createTime && item.createTime.replace(/-/g, '/'))).Format('yyyy-MM-dd h:m') }}</span><span>订单编号：{{item.orderCode}}</span></div>
        </div>
        <house-list v-if="item.housePerson" :houseInfo="item.housePerson" :detailPath="+item.houseType === 2 ? '/apartmentDetail' : '/detail'"></house-list>
        <div class="btn-wrap">
          <x-button mini plain @click.native="contactLandlor(item.webUser.id)">联系租客</x-button>
        </div>
      </div>
      <no-data v-show="orderList[tabIdx].length === 0"></no-data>
    </div>
    <!-- 已完成 -->
    <div class="order-list" v-if="tabIdx === 4">
      <div class="order-list-item" v-for="(item, index) in orderList[tabIdx]" :key="index">
        <div class="list-item-renter">
          <div class="renter-msg-left">
            <span>{{ item.webUser && item.webUser.trueName }}&nbsp;</span>
            <span class="order-type order-type-renew" v-if="item.orderType === 2">续租</span><span class="order-type order-type-cancel" v-if="item.orderType === 3">退租</span>
            <span class="status">{{ transOrderStatus(item.status) }}</span>
          </div>
          <div class="renter-msg-button"><span>{{ (new Date(item.createTime && item.createTime.replace(/-/g, '/'))).Format('yyyy-MM-dd h:m') }}</span><span>订单编号：{{item.orderCode}}</span></div>
        </div>
        <house-list v-if="item.housePerson" :houseInfo="item.housePerson" :detailPath="+item.houseType === 2 ? '/apartmentDetail' : '/detail'"></house-list>
      </div>
      <no-data v-show="orderList[tabIdx].length === 0"></no-data>
    </div>
    <div v-transfer-dom>
      <confirm v-model="showConfirm" class="confirm-order-refuse" @on-confirm="cancelOrder" @on-cancel="showConfirm = false">
        <p>您确定拒绝与该租客签约吗？</p>
        <div class="btn-close" @click="showConfirm = false"></div>
      </confirm>
    </div>
  </div>
</template>
<script>
  import {Confirm, TransferDomDirective as TransferDom} from 'vux'
  import houseList from '@/components/houseList'
  import noData from '@/components/noData'
  import contract from '@/components/contract'
  export default {
    directives: {
      TransferDom
    },
    components: {
      houseList,
      noData,
      Confirm,
      contract
    },
    data () {
      return {
        tabIdx: 0,
        orderId: 0,
        orderStatus: '',
        orderList: {
          0: [], // 全部
          1: [], // 待确认
          2: [], // 待租客签约
          3: [], // 待租客支付
          4: [] // 已完成
        },
        showConfirm: false,
        orderInfo: {
          housePersons: {},
          landlord: {},
          order: {},
          render: {},
          apartment: {},
          romm: {},
          renter: {
            mobile: '',
            trueName: ''
          }
        },
        showDialog: false// 签约提示框
      }
    },
    created () {
      // 全部
      this.getData(this.tabIdx, '')
    },
    methods: {
      // 订单状态：1-待确认；3-待租客签约；4-待租客支付；5-已完成；99-已关闭
      getData (idx, status) {
        this.orderStatus = status
        this.$axiosGeting(this.$api.myOrderList, {
          page: '1',
          pageSize: '10',
          status,
          type: '2'
        }).then(json => {
          if (json.code === '0000' && json.data && json.data.length > 0) {
             // 处理公寓房源数据
            let orderList = json.data
            for (let x in orderList) {
              if (orderList[x].houseType === 2) {
                let apartment = orderList[x].apartment
                let room = orderList[x].room
                let housePerson = {
                  id: apartment.id,
                  coverImg: apartment.cover,
                  houseTitle: room.buildingName + room.roomName,
                  address: apartment.address,
                  createTime: apartment.createTime,
                  rentalPrice: orderList[x].money
                }
                orderList[x]['housePerson'] = housePerson
              }
            }
            this.orderList[idx] = orderList
          }
        })
      },
      onItemClick (index) {
        this.tabIdx = index
        if (this.orderList[index].length === 0) {
          switch (index) {
            // 全部
            case 0: this.getData(index, ''); break
            // 待确认
            case 1: this.getData(index, '1'); break
            // 待租客签约
            case 2: this.getData(index, '3'); break
            // 待租客付款
            case 3: this.getData(index, '4'); break
            // 已完成
            case 4: this.getData(index, '5'); break
          }
        }
      },
      // 同意
      agree (orderType, orderId) {
        // 订单类型：1-普通订单；2-续租订单；3-退租订单
        if (orderType === 2) {
          this.$router.push({ name: 'renewOrder', params: { orderId } })
        } else if (orderType === 3) {
          this.$router.push({ name: 'cancelOrder', params: { orderId } })
        } else {
          this.$router.push({ name: 'landlordOrderDetail', params: { orderId } })
        }
        this.showDialog = true
      },
      // 拒绝
      refuse (orderId) {
        this.showConfirm = true
        this.orderId = orderId
      },
      // 取消订单
      cancelOrder () {
        this.showConfirm = false
        this.$axiosPosting(this.$api.cancelOrder, {
          orderId: this.orderId
        }).then(json => {
          if (json.code === '0000') {
            this.$vux.toast.text('拒绝签约成功', 'middle', 15000)
            this.getData(this.tabIdx, this.orderStatus)
          }
        })
      },
      transOrderStatus (status) {
        let statusTxt = ''
        switch (status) {
          case 1: statusTxt = '待确认'; break
          case 3: statusTxt = '待租客签约'; break
          case 4: statusTxt = '待租客付款'; break
          case 5: statusTxt = '已完成'; break
          default: statusTxt = '已关闭'; break
        }
        return statusTxt
      },
      // @click.native="contactLandlor(item.webUser.id)" 联系租客
      contactLandlor (landlordId) {
        let virtualNum = ''
        let mobileTo = ''
        this.$axiosPosting(this.$api.getUserById, {userId: landlordId}).then(res => {
          if (res.code === '0000') {
            mobileTo = res.data.mobile
            step2()
          }
        })
        const step2 = () => {
          let userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
          let mobileFor = userInfo ? userInfo.mobile : ''
          if (mobileFor) {
            if (virtualNum === '') {
              this.$axiosPosting(this.$api.getVirtualNum, {mobileFor, mobileTo}).then(res => {
                let data = ''
                if (res.code === '0000') {
                  data = JSON.parse(res.data)
                }
                if (res.code === '0000' && data.errorCode === '0') {
                  virtualNum = data.virtualNum
                  window.location.href = `tel:${virtualNum}`
                } else {
                  this.$vux.toast.text('无法获取房东电话')
                  virtualNum = ''
                }
              })
            } else {
              window.location.href = `tel:${virtualNum}`
            }
          } else {
            this.$router.replace('/login')
          }
        }
      }
    }
  }
</script>
<style lang="less">
  .rentOrder {
    padding-top: 44px;
    .vux-tab {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 99;
      .vux-tab-selected {
        border-bottom-style: solid;
      }
    }
    .order-list {
      font-size: .8rem;
      background: #f4f4f4;
      .order-list-item {
        position: relative;
        margin-bottom: .3rem;
        background: #fff;
        border-bottom: 0.5px solid #f4f4f4;
        .list-item-renter {
          padding: .6rem .75rem;
          border-bottom: 0.5px solid #f4f4f4;
          .renter-msg-left {
            font-size: 15px;
            line-height: 24px;
            color: #000;
            .order-type {
              padding: 2px 6px;
              font-size: 10px;
              line-height: 1;
              color: #fff;
              background: #097dde;
              border-radius: 3px;
              vertical-align: 1px;
            }
            .order-type-cancel {
              background: #d4323f;
            }
            .status {
              float: right;
              font-size: .5rem;
              color: #777;
            }
          }
          .renter-msg-button {
            display: flex;
            font-size: 12px;
            line-height: 24px;
            color: #777;
            span {
              flex: 1 0 auto;
            }
            span:nth-of-type(2) {
              flex-grow: 0;
            }
          }
        }
        .btn-wrap {
          position: relative;
          padding: .5rem .75rem;
          font-size: 0;
          text-align: right;
          &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            border-top: .5px solid #f4f4f4;
          }
          .weui-btn_mini {
            width: 3.5rem;
            margin-top: 0;
            margin-left: .5rem;
            padding: 0;
            font-size: 14px;
            line-height: 30px;
            color: #777;
            border-color: #777;
            border-radius: 3px;
          }
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    .ui-house-li {
      padding: .75rem .75rem .75rem 0;
      .house {
        padding: 0;
      }
    }
  }
  .confirm-order-refuse {
    .weui-dialog {
      overflow: visible;
    }
    .weui-dialog__bd {
      font-size: 17px;
      color: #000;
    }
    .weui-dialog__btn_default {
      color: #ff9600;
      background: #fff !important;
      border-top: 1px solid #f4f4f4;
    }
    .btn-close {
      position: absolute;
      left: 50%;
      bottom: -60px;
      width: 36px;
      height: 36px;
      margin-left: -18px;
      background: url("../../../images/icon_close.png") no-repeat;
      background-size: 100% 100%;
    }
  }

</style>
